<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<script>
console.log(localStorage.sitename)
</script>

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>
<h5>Example Heading <span class="label label-default">Label</span></h5>
<h6>Example Heading <span class="label label-default">Label</span></h6>

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

<br>
<br>

<a href="#">Mailbox <span class="badge">50</span></a>

<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills  nav-stacked">
    <li class="active">
        <a href="#">首页
            <span class="badge">42</span>
        </a>
    </li>
    <li>
        <a href="#">简介</a>
    </li>
    <li>
        <a href="#">消息
            <span class="badge">3</span>
        </a>
    </li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>首页</a>
        </li>
    <li>
        <a href="#">简介</a>
    </li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>消息
        </a>
    </li>
</ul>

<div class="alert alert-success  alert-dismissable">
 <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            成功！很好地完成了提交。</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-dansger">错误！请进行一些更改。
<a href="#" class="alert-lisnk">成功！很好地完成了提交。</a></div>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="10" 
        aria-valuemin="0" aria-valuemax="100" style="width: 4%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

<div class="progress">
	<div class="progress-bar progress-bar-success" role="progressbar"
		 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		 style="width: 90%;">
		<span class="sr-only">90% 完成（成功）</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info" role="progressbar"
		 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		 style="width: 30%;">
		<span class="sr-only">30% 完成（信息）</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-warning" role="progressbar"
		 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		 style="width: 20%;">
		<span class="sr-only">20% 完成（警告）</span>
	</div>
</div>
<div class="progress  progress-striped active">
	<div class="progress-bar progress-bar-warning" role="progressbar"
		 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		 style="width: 90%;">
		<span class="sr-only">20% 完成（警告）</span>
	</div>
	<div class="progress-bar progress-bar-danger" role="progressbar"
		 aria-valuenow="60" aria-valuemin="0" aria-valuemax="150"
		 style="width: 25%;">
		<span class="sr-only">10% 完成（危险）</span>
	</div>
</div>

<script>
	$(document).ready(function(){
		$("button").click(function(){
			$("li").filter(":contains('html'),:contains('query')").css("color", "cyan");
			//:contains('html'),
		});
	});
</script>

  <span>html大区</span>
<ul>
  <li>html专区</li>
  <li>div+css专区</li>
  <li>Jquery专区</li>
  <li>Javascript专区</li>
  <li>html5专区</li>
</ul>
<div>脚本之家</div>
<button>点击查看效果</button>


</body>
</html>